<template>
  <div class="DeviceManagement">
    <h4>设备管理</h4>
    <div class="custom-flex">
      <div class="custom-div-1">
        <div class="left">
          <img
            :src="
              info.goodsImg.includes('https')
                ? info.goodsImg
                : baseUrl + info.goodsImg
            "
            alt="加载失败"
          >
          <!--          <img :src="imgUrl" alt="">-->
        </div>
        <div class="right">
          <b>{{ info.goodsName }}</b>
          <p>
            <span>型号:{{ info.goodsSpec }}</span>
          </p>
        </div>
      </div>
    </div>
    <!-- shopAddEquipment -->
    <div class="cus-button">
      <el-button
        type="primary"
        @click="addEquipmentById"
      >新增设备</el-button>
    </div>
    <div class="cus-table">
      <el-table
        ref="tables"
        v-loading="loading"
        :data="Bindata"
        :header-cell-style="headerRowStyle"
        height="450"
        @selection-change="handelChange"
      >
        <el-table-column type="selection" />
        <el-table-column label="设备编号" prop="equId" width="200" />
        <el-table-column label="上线日期" prop="onlineTime" width="200" />
        <el-table-column label="最后使用日期" prop="lastUseTime" width="200" />
        <el-table-column label="累计使用时长" prop="useTime" width="200" />
        <el-table-column label="状态" prop="stat" width="200" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state == 0" type="success">上线</el-tag>
            <el-tag v-if="scope.row.state == 1" type="danger">下线</el-tag>
            <el-tag v-if="scope.row.state == 2" type="primary">维护中</el-tag>
            <el-tag v-if="scope.row.state == 3" type="primary">使用中</el-tag>
            <el-tag v-if="scope.row.state == 4" type="warning">已销售</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          header-align="right"
          align="right"
        >
          <template slot-scope="scope">
            <!-- <el-button
              type="text"
              @click="
                $router.push({
                  name: 'DeviceViewDetails',
                  query: {
                    rows: scope.row
                  }
                })
              "
            >
              查看详情</el-button> -->
            <div v-if="scope.row.state == 1">
              <el-button
                type="text"
                @click="Offline(scope.row, '上线')"
              >上线</el-button>
            </div>
            <div v-if="scope.row.state == 3">
              <el-button
                type="text"
                @click="Offline(scope.row, '下线')"
              >下线</el-button>
              <el-button
                type="text"
                @click="Offline(scope.row, '维护')"
              >维护</el-button>
            </div>
            <div v-if="scope.row.state == 0">
              <el-button
                type="text"
                @click="Offline(scope.row, '下线')"
              >下线</el-button>
              <el-button
                type="text"
                @click="Offline(scope.row, '维护')"
              >维护</el-button>
            </div>
            <div v-if="scope.row.state == 2">
              <el-button
                type="text"
                @click="Offline(scope.row, '下线')"
              >下线</el-button>
              <el-button
                type="text"
                @click="Offline(scope.row, '维护中')"
              >维护中</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="ele-div-2">
      <div class="left">
        <el-button
          plain
          @click="$refs.tables.toggleAllSelection()"
        >全选</el-button>
        <el-button plain @click="Offline(selection, '多下线')">下线</el-button>
        <el-button plain @click="Offline(selection, '多维护')">维护</el-button>
      </div>
      <div class="right">
        <el-pagination
          :current-page="pages.pageIndex"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pages.pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="pages.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 设置维护 -->
    <el-dialog
      :visible.sync="szwh_visibel"
      title="设置维护"
      class="ele-dialog-1"
      width="400px"
    >
      <el-form ref="forms" :rules="pattern" :model="formBind">
        <el-form-item prop="reason" label="原因">
          <el-input
            v-model="formBind.reason"
            :autosize="{ minRows: 7 }"
            type="textarea"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="ele-submit"
            @click="SubmitSZWH"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 已维护 -->
    <el-dialog :visible.sync="visible_ywh" title="已维护" class="ele-dialog-3">
      <el-form ref="forms" :rules="pattern" :model="formBind">
        <el-form-item prop="reason" label="备注:">
          <el-row :gutter="24">
            <el-col :span="20">
              <el-input
                v-model="formBind.reason"
                :autosize="{ minRows: 7 }"
                type="textarea"
                placeholder="输入备注内容"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="ele-submit"
            @click="submitYWH"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 下线 -->
    <el-dialog
      :visible.sync="visible_szxx"
      title="设置下线"
      class="ele-dialog-3"
    >
      <el-form :rules="pattern" :model="formBind">
        <el-form-item prop="reason" label="原因:">
          <el-row :gutter="24">
            <el-col :span="20">
              <el-input
                v-model="formBind.reason"
                :autosize="{ minRows: 7 }"
                type="textarea"
                placeholder="输入备注内容"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="ele-submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
/** 设备管理 */
import { changeRFIDState } from '@/api/lockItem'
import { commodityequipment } from '@/api/customAPI/shop/store'
export default {
  name: 'DeviceManagement',
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      /* imgUrl:'https://litemall-admin-001.oss-cn-hangzhou.aliyuncs.com/goods/images/1-1447838635704586240.jpg?Expires=4787626605&OSSAccessKeyId=LTAI5tKdb79Meq5HqDAupYVB&Signature=BBYFhETmmUX1OxQuj3QXeLzyXBY%3D',*/
      visible: true,
      szwh_visibel: false,
      visible_ywh: false,
      visible_szxx: false,
      loading: false,
      storeId: '',
      info: {
        goodsId: '',
        goodsImg: '',
        goodsName: '',
        goodsSpec: ''
      },
      Bindata: [],
      formBind: {
        reason: ''
      },
      pattern: {
        reason: [{ required: true, message: '请输入原因', trigger: 'blur' }]
      },
      selection: [],
      pages: {
        pageIndex: 1,
        pageSzie: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.InitialInfo()
  },
  activated() {
    this.InitialInfo()
  },
  methods: {
    /** 初始化列表 */
    InitialInfo() {
      const params = this.$dd(this.$route.query.p)
      this.info.goodsId = params.rows.goodsId
      this.info.goodsImg = params.rows.goodsPic
      this.info.goodsName = params.rows.goodsName
      this.info.goodsSpec = params.rows.goodsSpec
      this.storeId = params.storeId
      this.loading = true
      commodityequipment({
        storeId: params ? params.storeId : '',
        goodsProductId: params
          ? params.rows.goodsProductId
          : '',
        page: this.pages.pageIndex,
        limit: this.pages.pageSzie
      }).then(result => {
        this.Bindata = result.data.data.list
        this.pages.total = result.data.data.total
        this.loading = false
      })
    },
    handelChange(v) {
      this.selection = v.map(inf => inf.equId)
    },
    /** 设置维护 */
    SubmitSZWH() {
      this.$refs.forms.validate(v => {
        if (v) {
          this.changeRFIDState([this.szwh], '2')
        }
      })
    },
    /** 已维护 */
    submitYWH() {
      this.changeRFIDState([this.ywh], '0')
    },
    /** 下线/维护 */
    Offline(data, key) {
      if (data) {
        switch (key) {
          case '上线':
            this.$confirm('你确定要上线吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              showClose: true,
              type: 'warning'
            }).then(result => {
              this.changeRFIDState([data.equId], '0')
            })
            break
          case '下线':
            this.$confirm('你确定要下线吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              showClose: true,
              type: 'warning'
            }).then(result => {
              this.changeRFIDState([data.equId], '1')
            })
            break
          case '维护':
            console.log('维护')
            this.szwh_visibel = true
            this.szwh = data.equId
            this.type_szwy = '单'
            break

          case '维护中':
            console.log('维护中')
            this.visible_ywh = true
            this.ywh = data.equId
            break
          case '多上线':
            if (this.selection.length > 0) {
              this.$confirm('你确定要上线吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showClose: true,
                type: 'warning'
              }).then(result => {
                this.changeRFIDState(this.selection, '0')
              })
            } else {
              this.$message.warning('请选择数据')
            }
            break
          case '多下线':
            if (this.selection.length > 0) {
              this.$confirm('你确定要下线吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showClose: true,
                type: 'warning'
              }).then(result => {
                this.changeRFIDState(this.selection, '1')
              })
            } else {
              this.$message.warning('请选择数据')
            }
            break
          case '多维护':
            console.log('多维护')
            if (this.selection.length > 0) {
              this.szwh_visibel = true
              this.type_szwy = '多'
            } else {
              this.$message.warning('请选择数据')
            }
            break
        }
      }
    },
    /** 改变状态 */
    changeRFIDState(id, type) {
      // 上线 type 0,下线 type 1 维护/设置维护 type 2
      changeRFIDState({
        idList: id,
        reason: this.formBind.reason || '',
        type: type
      }).then(() => {
        this.$message.success('成功')
        this.InitialInfo()
        this.visible_szxx = false
        this.visible_ywh = false
        this.szwh_visibel = false
      })
    },
    /** 表头样式 */
    headerRowStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    },
    addEquipmentById() {
      this.$router.push({
        name: 'shopAddEquipment',
        query: {
          p: this.$ed({
            storeId: this.storeId,
            goodsInfo: this.info
          })
        }
      })
    },
    handleSizeChange(v) {
      this.pages.pageSzie = v
      this.InitialInfo()
    },
    handleCurrentChange(v) {
      this.pages.pageIndex = v
      this.InitialInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.DeviceManagement {
  padding: 50px 100px;
  .custom-flex {
    display: flex;
    flex-wrap: wrap;
    .custom-div-1 {
      margin-right: 20px;
      display: flex;
      align-items: center;
      .left {
        width: 100px;
        height: 100px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .right {
        padding-left: 20px;
      }
    }
  }
  .cus-button,
  .cus-table {
    margin-top: 30px;
  }

  .ele-div-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    .left {
      width: 330px;
      .el-button {
        width: 100px;
      }
    }
  }
}
</style>
